import React from 'react'

import {TabBarBottom, TabNavigator} from 'react-navigation'

import {Image, StyleSheet} from 'react-native'

import Home from './pages/Home/Home'
import Find from './pages/Find/Find'
import Task from './pages/Task/Task'
import My from './pages/My/My'

const HomeTabUnSelectedIcon = require("../static/img/1_normal_ios.png");
const HomeTabSelectedIcon = require("../static/img/1_down_ios.png");
const ClassTabUnSelectedIcon = require("../static/img/2_normal_ios.png");
const ClassTabSelectedIcon = require("../static/img/2_down_ios.png");
const BrandTabUnSelectedIcon = require("../static/img/3_normal_ios2.png");
const BrandTabSelectedIcon = require("../static/img/3_down_ios2.png");
const zetianshuoTabUnSelectedIcon = require("../static/img/4_normal_ios.png");
const zetianshuoTabSelectedIcon = require("../static/img/4_down_ios.png");
const MyTabUnSelectedIcon = require("../static/img/5_normal_ios.png");
const MyTabSelectedIcon = require("../static/img/5_down_ios.png");


const TabTar = TabNavigator(
    {
      Home: {
        screen: Home,
        navigationOptions: ({navigation, screeProps}) => ({
          header:null,
          headerTitle: '直播',
          tabBarLabel: '首页',
          tabBarIcon: (({tintColor, focused}) => {
            return (
                <Image
                    source={focused ? ClassTabSelectedIcon : ClassTabUnSelectedIcon}
                    style={styles.tabbarImage}
                />
            )
          }),
        })
      },
      Find: {
        screen: Find,
        navigationOptions: ({navigation, screeProps}) => ({
          tabBarLabel: '发现',
          tabBarIcon: (({tintColor, focused}) => {
            return (
                <Image
                    source={focused ? HomeTabSelectedIcon : HomeTabUnSelectedIcon}
                    style={styles.tabbarImage}
                />
            )
          }),
        })
      },
      Task: {
        screen: Task,
        navigationOptions: ({navigation, screeProps}) => ({
          tabBarLabel: '任务',
          tabBarIcon: (({tintColor, focused}) => {
            return (
                <Image
                    source={focused ? BrandTabSelectedIcon : BrandTabUnSelectedIcon}
                    style={styles.tabbarImage}
                />
            )
          }),
        })
      },
      My: {
        screen: My,
        navigationOptions: ({navigation, screeProps}) => ({
          tabBarLabel: '我的',
          tabBarIcon: (({tintColor, focused}) => {
            return (
                <Image
                    source={focused ? MyTabSelectedIcon : MyTabUnSelectedIcon}
                    style={styles.tabbarImage}
                />
            )
          }),
        })
      }
    },
    {
      tabBarComponent: TabBarBottom,  // TabBarBottom
      tabBarPosition: 'bottom',       // 显示位置，android 默认是显示在页面顶端的
      swipeEnabled: false,             // 是否可以左右滑动切换tab
      animationEnabled: false,         // 切换页面时是否有动画效果
      lazy: true,                     // 懒加载
      backBehavior: 'none',           // 按 back 键是否跳转到第一个Tab(首页)， none 为不跳转
      tabBarOptions: {
        activeTintColor: '#ff0039', //  激活版块的颜色
        inactiveTintColor: '#404040', // 非激活版块的颜色
        showIcon: true,
        indicatorStyle: {height: 0},
        style: {backgroundColor: 'rgba(255,255,255,0.8)'},// 背景颜色
        labelStyle: {fontSize: 12}          // 文字大小
      },
    }
);


const styles = StyleSheet.create({
  tabbarImage: {
    width: 25,
    height: 25,
    marginBottom: -3,
  }
});

export default TabTar